<template>
  <Card
    class="app-track-card"
    :shadow="false"
    :bordered="false"
  >
    <p slot="title">
      {{ item.tag }}
      <span class="app-track-card-header-user">
        上传者：
        <router-link
          :to="{ name: 'User', params: { userId: item.uploadedByUser.id }}"
        >
          {{ item.uploadedByUser.username }}
        </router-link>
      </span>
    </p>
    <!-- 音频 -->
    <TrackPlayer
      :src="fullUrl(item.file.path)"
      :filename="item.tag"
    />
  </Card>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { DeepPartial } from 'ts-essentials'
import { Track } from '@/api/resources'
import { cdn } from '@/utils'
import TrackPlayer from '../components/TrackPlayer.vue'

@Component({
  name: 'TrackTabListItem',
  components: {
    TrackPlayer
  }
})
export default class extends Vue {
  @Prop() readonly item!: DeepPartial<Track>

  private fullUrl = cdn
}
</script>

<style lang="less" scoped>
@import "../../../../styles/theme";
  .app-track-card {
    width: 30%;
    background: lighten(@dark-bg-color, 5%);
  }
  .app-track-card-header-user{
    margin-left: 8px;
    font-size: 0.8em;
    font-weight: 400;
  }
</style>
